<template>
	<view>
		<kb-page-head :title="title"> </kb-page-head>
		<kb-skeleton-index :loading="loading">
			<!-- 滑动片骨架 -->
			<view class="swiper">

				<view class="swiper-search">
					<up-search placeholder="搜索二手房/租房等房源" :show-action="true" :clearabled="false" v-model="keyword"
						:search-icon-color="ee.primayColor" @search="onSearch" search-icon-size="26" margin="0px 80rpx"
						shape="square" action-text="" :actionStyle="{
				backgroundImage: 'url('+ee.webUrl+'/images/icon_mapsearch.png)' ,
				backgroundPosition:'center',
				backgroundSize:'cover',  
				height:'60rpx', 
				width:'60rpx', zIndex:'20',
				marginLeft:'-72rpx',
				fontSize:'0.1em'
			}" @custom="gomap"></up-search>
				</view>
				<!-- 顶部幻灯片 -->
				<up-swiper height="160" :list="ee.indexslides" :radius="0" :circular="true"></up-swiper>

			</view>

			<!-- 导航的数量大于8个的时候自动出现滑块和底部的indicator-dots点图标 -->
			<swiper v-if="( navmenuPage(ee.navmenu.length) ) > 0" :indicator-dots="( (navmenuPage(ee.navmenu.length) >1))?true:false"
				class="menu-swiper" :style="{'height':menuHeight}">
				<swiper-item v-if="navmenuPage(ee.navmenu.length) > 0" v-for="(dots,k) in (dotlength(ee.navmenu.length)  )"
					:key="k">
					<view class="menu">
						<view v-for="(item,index) in ee.navmenu.slice((dots.id-1)*10, dots.id*10)" :key="index" class="item">
							<view @click="ee.jumpto( item.pathurl , item.target) " :url="item.pathurl">
								<view class='item-icon'>
									<view v-if="item.iconpic" class='dao2'>
										<up-image :src="item.iconpic" width="45" height="45"></up-image>
										<!-- <image :src="item.iconpic" lazy-load="{{true}}" mode="widthFix" class="menu-img"></image> -->
									</view>
									<view v-else :class="'dao  bg'+(index+ 1)">
										<text :class="['iconfont' , item.icon ]"></text>
									</view>
								</view>
								<view class='dao-txt'>{{item.name}} </view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 没有数据显示骨架 -->


			<view class="u-page">

				<view v-if="notice?.title" class="notice-box">
					<up-notice-bar :text="notice.title" mode="" speed="50" direction="column" :color="ee.primayColor"
						@click="showNotice"></up-notice-bar>
				</view>
				<!-- 滚动通知end -->

				<view class="index-bar">
					<view class="index-bar-title">
						<text>热门房源</text>
					</view>
					<view class="index-bar-action">
						<up-subsection :list="sectionType" :activeColor="ee.primayColor" @change="sectionChange"
							font-size="14" bgColor="#fff" :current="0"></up-subsection>
					</view>
				</view>

				<view class="house-items-ul">
					<view class="ul-li" v-for="(item, index) in sechouse" :key="index">

						<kb-sechouse-item :zhutype="zhutype" :rent_type="rent_type" :house="item"></kb-sechouse-item>

					</view>
				</view>

				<navigator :url="'/pages/house/house?zhutype='+zhutype">
					<view class="findmore"> 查看更多房源 </view>
				</navigator>

			</view> <!-- </u-page> end -->


			<!-- 最外层用骨架 -->

		</kb-skeleton-index>
	</view>
</template>

<script>
	import util from "/common/tools/utils.js";
	export default {
		name: "pageIndex",
		props: {
			title: {
				Type: String,
				default: undefined
			}
		},
		data() {
			return {
				loading: true,
				keyword: undefined,

				adinfo: {},
				menuHeight: '410rpx',
				notice: {},
				sechouse: [],
				rent_type: 0, //出售
				zhutype: 0, //0=二手房 3=新房 2=租房 1=写字楼
				sectionType: [{
					name: '二手房',
					zhutype: 0
				}, {
					name: '租房',
					zhutype: 2
				}],
			}
		},

		methods: {
			dotlength(nums){
				let page = this.navmenuPage(nums);
				let r = [];
				for(let k=1; k<page +1; k++){
					r.push({id:k});
				} 
				return r;
			},
			//处理导航菜单显示页数
			navmenuPage(nums) {

				if (nums) {
					let v = Math.ceil(nums / 10)
					if (nums <= 5) {
						this.menuHeight = '220rpx';
					}
					if (nums > 10) {
						this.menuHeight = '430rpx';
					}
					return v
				} else return 0
			},
			sectionChange(i) {
				this.zhutype = this.sectionType[i].zhutype;				

				this.fetchHouse();
			},
			showNotice(i) {
				if (this.notice.url[i].link)
					//跳转到公众号文章webview显示
					this.ee.jumpto(this.notice.url[i].link, 1)
				else
					this.ee.jumpto("/pages/news/news?id=" + this.notice.url[i].id)
			},
			gomap: function(value) {
				uni.navigateTo({
					url: '/pages/map/map'
				})
			},

			onSearch(value) {
				this.ee.jumpto("/pages/search/search?keyword=" + this.keyword)
			},

			fetchPageData() {

				this.kbutil.getModuleData("webfront/notice").then(ret => {
					this.notice = {
						title: ret.title,
						url: ret.url,
					}
				})

				this.fetchHouse();
			},
			fetchHouse() {
				//uni.showLoading({title: 'Loading...'});
				this.kbutil.getSechouseList({
					zhutype: this.zhutype
				}).then(
					(ret) => {
						this.sechouse = ret?.items || [];
						//uni.hideLoading();

						//延迟显示skeleton
						setTimeout(() => this.loading = false, 1200)

					}
				)
			}

		},
		mounted() {

			this.fetchPageData();


		},

	}
</script>

<style lang="scss">
	.swiper {
		position: relative;
		z-index: 0;

		&-search {
			position: absolute;
			bottom: 20rpx;
			z-index: 10;
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: center;
			opacity: 0.9;
		}
	}

	.u-page {
		background: #fff !important;

		padding: 30rpx;
		padding-top: 0rpx;

	}

	.notice-box {
		margin-bottom: 30rpx;
	}

	.index-bar {
		display: flex;
		justify-content: space-between;
		vertical-align: center;
		align-items: center;


		&-title {
			font-size: 34rpx;
			font-weight: 400;
			flex-grow: 2;
		}

		&-action {
			display: flex;
			justify-content: flex-end;
			flex-grow: 1;
		}
	}

	.menu-swiper {

		background-color: #fff;
	}

	//.menu-show-dot{
	// 	  height: 410rpx;
	// }

	/*导航菜单*/
	.menu {
		padding: 10rpx;
		padding-top: 40rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.menu .item {
		width: 20%;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		height: 180rpx;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		/* Firefox */
		-webkit-box-sizing: border-box;
		/* Safari */
	}

	.menu .item-icon {
		display: flex;
		justify-content: center;
	}

	.house-items-ul .ul-li {
		border-bottom: 1px solid #dadada;
	}

	.house-items-ul .ul-li:last-child {
		border-bottom: 0;
	}
</style>